document.addEventListener('DOMContentLoaded', () => {
  const totalCountElement = document.getElementById('totalCount');
  const resetBtn = document.getElementById('resetBtn');
  const keyElements = document.querySelectorAll('.key-count');

  // 更新界面显示
  function updateDisplay(keyStats) {
    let totalCount = 0;
    
    // 更新每个按键的计数
    keyElements.forEach(element => {
      const key = element.getAttribute('data-key');
      const count = keyStats[key] || 0;
      element.textContent = count;
      totalCount += count;
    });
    
    // 更新总计数
    totalCountElement.textContent = totalCount;
  }

  // 从存储中获取数据并显示
  function loadAndDisplayStats() {
    chrome.storage.local.get('keyStats', (result) => {
      const keyStats = result.keyStats || {};
      updateDisplay(keyStats);
    });
  }

  // 重置按钮点击事件
  resetBtn.addEventListener('click', () => {
    chrome.storage.local.set({ keyStats: {} }, () => {
      loadAndDisplayStats();
    });
  });

  // 添加按键按下时的视觉反馈
  chrome.storage.onChanged.addListener((changes, namespace) => {
    if (namespace === 'local' && changes.keyStats) {
      updateDisplay(changes.keyStats.newValue || {});
    }
  });

  // 初始加载数据
  loadAndDisplayStats();
});
